<template>
<div class="box">
    <div class="left_box">
        <div class="header">
            <div class="left_title">
                <h2>设备集群</h2>
                <a-switch v-model:checked="checked"></a-switch>
                <div>
                    仅查看关注设备
                </div>
            </div>
            <div class="right_search">
                <div class="node_select">
                    <span>
                        节点选择：
                    </span>
                    <div>
                        <a-breadcrumb separator=">">
                            <a-breadcrumb-item href="">
                                锦江油化厂
                            </a-breadcrumb-item>
                            <a-breadcrumb-item href="">
                                异丁烯
                            </a-breadcrumb-item>
                        </a-breadcrumb>
                    </div>
                </div>
                <div class="input_search">
                    <a-input-search v-model:value="searchInput" placeholder="请输入设备名称" style="width: 200px" @search="onSearch" />
                </div>
                <!-- <div class="radio_search">
                    <a-radio-group v-model:value="searchRadio" button-style="solid">
                        <a-radio-button value="1">
                            列表
                        </a-radio-button>
                        <a-radio-button value="2">
                            图示
                        </a-radio-button>
                    </a-radio-group>
                </div> -->
            </div>
        </div>
        <div class="content">
            <div class="list_box">
                <template v-for="(item, index) in list">
                    <div class="listItem">
                        <div class="item_header">
                            <div class="item_title">
                                {{item.title}}
                            </div>
                            <div class="item_collect" @click="attention(item)">
                                <a-icon v-if="item.attention" theme="filled" type="star" style="color: #3b63e4;" />
                                <a-icon v-else type="star" />
                            </div>
                        </div>
                        <div class="item_content">
                            <div class="item_c_left">
                                <div class="item_img">
                                    <img src="../../assets/fj.png" alt="" srcset="">
                                </div>
                                <div class="item_time">
                                    <div>
                                        <span>
                                            运行总时长
                                        </span>
                                        <br>
                                        <span>
                                            {{item.time}}
                                        </span>
                                    </div>
                                    <div>
                                        <span>
                                            健康指数
                                        </span>
                                        <br>
                                        <span>
                                            85分
                                        </span>
                                    </div>
                                </div>
                            </div>
                            <div class="item_c_right">
                                <div>
                                    <span>
                                        设备状态
                                    </span>
                                    <span>
                                        <img src="../../assets/zc.png" alt="" srcset=""> {{ item.state ? '网络正常' : '网络异常' }}
                                    </span>
                                </div>
                                <div>
                                    <span>
                                        告警持续时长
                                    </span>
                                    <span>
                                        <img v-if="item.alertTime" src="../../assets/ej.png" alt="" srcset=""> {{ item.alertTime || '/' }}
                                    </span>
                                </div>
                                <div>
                                    <span>
                                        故障类型
                                    </span>
                                    <span>
                                        <img src="../../assets/ej.png" alt="" srcset="">
                                        <img src="../../assets/ej.png" alt="" srcset="">
                                        <img src="../../assets/ej.png" alt="" srcset="">
                                    </span>
                                </div>
                                <div>
                                    <span>
                                        数据更新时间
                                    </span>
                                    <span>
                                        {{ item.updateTime || '2020-12-12 12:00' }}
                                    </span>
                                </div>
                            </div>
                        </div>
                    </div>
                </template>
            </div>
            <div class="list_page">
                <a-pagination show-size-changer v-model:current="pageNow" :default-current="1" :total="listTotal" @showSizeChange="onShowSizeChange" @change="onShowChange" />
            </div>
        </div>
    </div>
    <div class="right_box">
        <div class="echarts_box">
            <div class="echarts_item">
                <div class="e_item_name">
                    设备状态
                </div>
                <div class="echarts_con">
                    <div id="e1"></div>
                    <div id="e2"></div>
                </div>
            </div>
            <div class="echarts_item">
                <div class="e_item_name">
                    运行状态
                </div>
                <div class="echarts_con">
                    <div id="e3"></div>
                    <div id="e4"></div>
                </div>
            </div>
        </div>
    </div>
</div>
</template>

<script>
import {
    Pagination
} from 'ant-design-vue';
var echarts = require('echarts');

export default {
    components: {
        APagination: Pagination
    },
    data: function () {
        return {
            checked: false,

            searchInput: '',
            searchRadio: '1',
            collectValue: 0,

            selectValue: [],
            options: [{
                value: '01',
                label: '锦江油化厂',
                children: [{
                        value: '01',
                        label: '异丁烯',
                    },
                    {
                        value: '02',
                        label: '醚化车间',
                    },
                    {
                        value: '03',
                        label: 'MTBE',
                    },
                    {
                        value: '04',
                        label: '芳构化',
                    },
                ],
            }],

            list: [{
                    title: '压缩机1111',
                    time: '213天11小时',
                    alertTime: '',
                    state: '0',
                    img: '../../assets/fj.png',
                    attention: 1
                },
                {
                    title: '压缩机2222',
                    time: '213天11小时',
                    alertTime: '不足1小时',
                    state: '1',
                    img: '../../assets/fj.png',
                    attention: 0
                },
                {
                    title: '压缩机3333',
                    time: '213天11小时',
                    alertTime: '',
                    state: '0',
                    img: '../../assets/fj.png',
                    attention: 1
                },
                {
                    title: '压缩机4444',
                    time: '213天11小时',
                    alertTime: '不足1小时',
                    state: '1',
                    img: '../../assets/fj.png',
                    attention: 0
                },
                {
                    title: '压缩机5555',
                    time: '213天11小时',
                    alertTime: '',
                    state: '0',
                    img: '../../assets/fj.png',
                    attention: 1
                },
                {
                    title: '压缩机6666',
                    time: '213天11小时',
                    alertTime: '不足1小时',
                    state: '1',
                    img: '../../assets/fj.png',
                    attention: 0
                },
                {
                    title: '压缩机1111',
                    time: '213天11小时',
                    alertTime: '',
                    state: '0',
                    img: '../../assets/fj.png',
                    attention: 1
                },
                {
                    title: '压缩机2222',
                    time: '213天11小时',
                    alertTime: '不足1小时',
                    state: '1',
                    img: '../../assets/fj.png',
                    attention: 0
                },
                {
                    title: '压缩机3333',
                    time: '213天11小时',
                    alertTime: '',
                    state: '0',
                    img: '../../assets/fj.png',
                    attention: 1
                },
            ],

            pageNow: 1,
            listTotal: 100,
        }
    },
    methods: {
        // 搜索事件
        onSearch: function () {
            console.log('搜索');
        },

        // 关注小心心点击事件
        attention: function (item) {
            item.attention = item.attention == 1 ? 0 : 1;
        },

        // 分页数量改变事件
        onShowSizeChange: function (e) {
            console.log(e);
        },

        // 分页改变事件
        onShowChange: function (e) {
            console.log(e)
        },

        // 初始化echarts
        initEcharts: function () {
            this.initE1();
            this.initE2();
            this.initE3();
            this.initE4();
        },

        initE1: function (data) {
            var e1 = echarts.init(document.getElementById('e1'));

            data = {
                run: 50,
                stop: 20
            }

            var option = {
                title: {
                    show: true,
                    text: Number(data.run) + Number(data.stop),
                    subtext: '设备总数',
                    left: "20%",
                    top: "middle",
                    // textAlign: 'center',
                    textStyle: {
                        color: "#2D3039",
                        fontSize: 35,
                        fontWeight: "normal",
                        fontFamily: "LcdD"
                    },
                    subtextStyle: {
                        color: "#4E5272",
                        fontSize: 15,
                        fontFamily: "PingFangSC-Regular",
                        top: "middle"
                    },
                    padding: 10,
                    itemGap: -4
                },

                legend: {
                    orient: 'vertical',
                    right: '0',
                    // top: '40%',
                    data: ['运行', '停机'],
                    formatter: function (name) {
                        return name + '：' + (name == '运行' ? data.run : data.stop) + '台'
                    }
                },

                series: [{
                    label: {
                        show: false,
                    },
                    name: '设备状态',
                    type: 'pie',
                    radius: ['65%', '80%'],
                    center: ["30%", "50%"],
                    avoidLabelOverlap: false,
                    data: [{
                            value: data.run,
                            name: '运行'
                        },
                        {
                            value: data.stop,
                            name: '停机'
                        },
                    ]
                }]
            };
            e1.setOption(option);
        },

        initE2: function (data) {
            var e2 = echarts.init(document.getElementById('e2'));
            var data = [];
            var xAxis = [];
            for (var i = 0; i < 12; i++) {
                data.push(Math.floor(Math.random() * 100));
                xAxis.push('2020' + (i + 1));
            }

            var option = {
                title: {
                    text: '设备运行率(%)',
                    left: 'center'
                },
                // grid: {
                //     left: '3%',
                //     right: '4%',
                //     bottom: '3%',
                //     containLabel: true
                // },
                xAxis: [{
                    type: 'category',
                    boundaryGap: false,
                    // nameRotate: '45deg',
                    axisLabel: {
                        interval: 0,
                        rotate: 45
                    },
                    data: xAxis
                }],
                yAxis: [{
                    type: 'value'
                }],
                series: [{
                    name: '设备运行率',
                    type: 'line',
                    stack: '总量',
                    areaStyle: {},
                    data: data
                }, ]
            };
            e2.setOption(option);
        },

        initE3: function (data) {
            var e3 = echarts.init(document.getElementById('e3'));

            data = {
                a: {
                    name: '正常',
                    value: 50,
                },
                b: {
                    name: '一级告警',
                    value: 5,
                },
                c: {
                    name: '二级告警',
                    value: 6,
                },
                d: {
                    name: '三级告警',
                    value: 5
                },
                e: {
                    name: '四级告警',
                    value: 4
                }
            }

            var d = [];
            var legend = [];

            for (var key in data) {
                d.push(data[key]);
                legend.push(data[key].name);
            }

            console.log(legend)

            var option = {

                legend: {
                    orient: 'vertical',
                    right: 0,
                    // top: '40%',
                    data: legend,
                    formatter: function (name) {
                        return name + '：' + (d[legend.indexOf(name)].value) + '台'
                    }
                },

                series: [{
                    label: {
                        show: false,
                    },
                    name: '设备状态',
                    type: 'pie',
                    radius: ['65%', '80%'],
                    center: ["30%", "50%"],
                    avoidLabelOverlap: false,
                    data: d
                }]
            };
            e3.setOption(option);
        },

        initE4: function (data) {
            var e4 = echarts.init(document.getElementById('e4'));
            var data = [[],[],[],[],[]];
            var legend = ['正常', '一级告警', '二级告警', '三级告警', '四级告警'];
            var xAxis = [];
            
            for (var i = 0; i < 12; i++) {
                data[0].push(Math.floor(Math.random() * 100));
                data[1].push(data[0][i] + Math.floor(Math.random() * 100));
                data[2].push(data[1][i] + Math.floor(Math.random() * 100));
                data[3].push(data[2][i] + Math.floor(Math.random() * 100));
                data[4].push(data[3][i] + Math.floor(Math.random() * 100));
                xAxis.push('2020' + (i + 1));
            }

            var option = {
                title: {
                    text: '告警趋势',
                    left: 'center'
                },
                grid: {
                    left: '3%',
                    right: '4%',
                    bottom: '3%',
                    containLabel: true
                },
                xAxis: [{
                    type: 'category',
                    boundaryGap: false,
                    // nameRotate: '45deg',
                    axisLabel: {
                        interval: 0,
                        rotate: 45
                    },
                    data: xAxis
                }],
                yAxis: [{
                    type: 'value'
                }],
                series: [
                    {
                        name: '正常',
                        type: 'line',
                        stack: '总量',
                        areaStyle: {},
                        data: data[0]
                    }, 
                    {
                        name: '一级告警',
                        type: 'line',
                        stack: '总量',
                        areaStyle: {},
                        data: data[1]
                    }, 
                    {
                        name: '二级告警',
                        type: 'line',
                        stack: '总量',
                        areaStyle: {},
                        data: data[2]
                    }, 
                    {
                        name: '三级告警',
                        type: 'line',
                        stack: '总量',
                        areaStyle: {},
                        data: data[3]
                    }, 
                    {
                        name: '四级告警',
                        type: 'line',
                        stack: '总量',
                        areaStyle: {},
                        data: data[4]
                    }, 
                ]
            };
            e4.setOption(option);
        },
    },
    mounted: function () {
        this.initEcharts();
    }
}
</script>

<style lang="less">
.box {
    display: flex;

    .left_box {
        flex: 1;
        margin-right: 20px;

        .header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            height: 50px;
            padding: 5px 10px;

            .left_title {
                display: flex;
                align-items: center;

                &>* {
                    margin: 0 5px;
                }
            }

            .right_search {
                display: flex;
                align-items: center;

                .node_select {
                    margin-left: 5px;
                    display: flex;
                    align-items: center;
                }

                .input_search {
                    margin: 0 15px;
                }
            }

        }

        .content {
            .list_box {
                display: flex;
                flex-wrap: wrap;
                align-items: stretch;
                justify-content: space-around;

                .listItem {
                    width: 31%;
                    min-width: 280px;
                    padding: 10px;
                    border: 1px solid #eee;
                    border-radius: 10px;
                    box-shadow: 0 1px 5px 1px #bbb;
                    margin: 10px 0;

                    .item_header {
                        display: flex;
                        justify-content: space-between;
                        align-items: center;
                        padding-bottom: 10px;

                        .item_title {
                            color: #333;
                            font-size: 16px;
                            font-weight: bold;
                        }
                    }

                    .item_content {
                        display: flex;

                        .item_c_left {
                            width: 60%;

                            .item_img {
                                width: 100%;
                                display: flex;
                                justify-content: center;
                                align-items: center;
                                padding: 15px 5px;
                                background-color: #bbb;
                                margin-bottom: 5px;
                                border-radius: 10px;

                                img {
                                    width: 60%;
                                }
                            }

                            .item_time {
                                display: flex;
                                justify-content: space-between;

                                div {
                                    &:last-child {
                                        text-align: right;
                                    }
                                }

                                span {
                                    color: #333;
                                    font-weight: bold;

                                    &:first-child {
                                        color: #888;
                                        font-weight: 100;
                                    }
                                }
                            }
                        }

                        .item_c_right {
                            padding-left: 15px;
                            width: 40%;
                            display: flex;
                            flex-direction: column;
                            justify-content: space-between;
                            align-items: flex-start;
                            flex: 1;
                            font-size: 12px;

                            div {
                                margin: 3px 5px;
                                display: flex;
                                flex-direction: column;

                                span {
                                    color: #555;

                                    &:first-child {
                                        color: #999;
                                    }
                                }

                                img {
                                    width: 20px;
                                    height: 20px;
                                }
                            }
                        }

                    }
                }

            }

            .list_page {
                ul {
                    text-align: right;
                }
            }
        }

    }

    .right_box {
        width: 350px;

        .echarts_box {

            .echarts_item {
                padding: 10px;

                .e_item_name {
                    height: 25px;
                    line-height: 15px;
                    font-size: 20px;
                    color: #666;
                    font-weight: bold;
                }

                .echarts_con {
                    height: 400px;
                    border-radius: 10px;
                    padding: 5px;
                    display: flex;
                    flex-direction: column;
                    justify-content: center;
                    align-items: center;

                    div {
                        flex: 1;
                        width: 100%;
                        height: 200px;
                    }
                }

            }
        }
    }
}
</style>
